import { FC, useState } from 'react';
import { Card, Space, Modal, Button, Popconfirm, Switch, message } from 'antd';

const index: FC = () => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    setIsModalVisible(false);
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  // 异步
  const [visible, setVisible] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [modalText, setModalText] = useState('Content of the modal');

  const showModal1 = () => {
    setVisible(true);
  };

  const handleOk1 = () => {
    setModalText('The modal will be closed after two seconds');
    setConfirmLoading(true);
    setTimeout(() => {
      setVisible(false);
      setConfirmLoading(false);
    }, 2000);
  };

  const handleCancel1 = () => {
    console.log('Clicked cancel button');
    setVisible(false);
  };
  // 气泡确认
  const [visible1, setVisible1] = useState(false);
  const [condition, setCondition] = useState(true);

  const changeCondition = (value: boolean) => {
    setCondition(value);
  };

  const confirm = () => {
    setVisible1(false);
    message.success('Next step.');
  };

  const cancel = () => {
    setVisible1(false);
    message.error('Click on cancel.');
  };

  const handleVisibleChange = (visible1: boolean) => {
    if (!visible1) {
      setVisible1(visible1);;
      return;
    }
    // Determining condition before show the popconfirm.
    console.log(condition);
    if (condition) {
      confirm(); // next step
    } else {
      setVisible1(visible1); // show the popconfirm
    }
  };
  return (
    <Space direction="vertical" style={{ width: "100%" }}>
      <Card title="模态对话框">
        <Space>
          <Button type="primary" onClick={showModal}>
            Open Modal
          </Button>
          <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
          </Modal>
        </Space>
      </Card>
      <Card title="异步关闭">
        <Space>
          <Button type="primary" onClick={showModal1}>
            Open Modal with async logic
          </Button>
          <Modal
            title="Title"
            visible={visible}
            onOk={handleOk1}
            confirmLoading={confirmLoading}
            onCancel={handleCancel1}
          >
            <p>{modalText}</p>
          </Modal>
        </Space>
      </Card>
      <Card title="气泡确认框">
        <Popconfirm
          title="Are you sure delete this task?"
          visible={visible1}
          onVisibleChange={handleVisibleChange}
          onConfirm={confirm}
          onCancel={cancel}
          okText="Yes"
          cancelText="No"
        >
          <a href="#">Delete a task</a>
        </Popconfirm>
        <br />
        <br />
        Whether directly execute：
        <Switch defaultChecked onChange={changeCondition} />
      </Card>
    </Space>
  );
}

export default index;